<template>
  <div class="pb50" v-loading="loading">
    <!--内容-->
    <div class="product-content">
      <!--基本信息-->
      <div class="common-form">基本信息</div>
      <div class="table-wrap">
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">订单号：</span>
              {{ detail.orderNo }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">买家：</span>
              {{ detail.nickName }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">标题：</span>
              {{ detail.orderNo }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">
                总价(优惠前)
                ：
              </span>
              {{ detail.totalPrice }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">总价（优惠后）：</span>
              {{ detail.orderPrice }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">优惠券抵扣金额：</span>
              {{ detail.couponMoney }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">积分抵扣金额</span>
              {{ detail.pointsMoney }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">尾款(元)：</span>
              {{ detail.finalPrice }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">定金(元)：</span>
              {{ detail.depositPrice }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">包装费(元)：</span>
              {{ detail.packPrice }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">门店名称：</span>
              {{ detail.extractStore.storeName }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">详细地址：</span>
              {{ detail.extractStore.address }}
            </div>
          </el-col>

          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">收货人名称：</span>
              {{ detail.extractName }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">联系方式：</span>
              {{ detail.extractPhone }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">订单状态：</span>
              <el-tag :type="detail.orderStatus == 10 ? 'warning' : 'success'">{{ detail.orderStatusText }}</el-tag>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="common-form mt16">商品信息</div>
      <div class="table-wrap">
        <el-table size="small" v-loading="tabLoading" :data="productList" border style="width: 100%" stripe>
          <el-table-column prop="imagePath" label="封面">
            <template #default="scope">
              <img :src="scope.row.imagePath" style="width: 60px ; height:60px" />
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="标题" width="300"></el-table-column>
          <el-table-column prop="productAttr" label="规格属性" width="300"></el-table-column>
          <el-table-column prop="totalNum" label="数量" width="150">
          </el-table-column>
          <el-table-column prop="productPrice" label="产品价格" width="150">
            <template #default="scope">￥{{ scope.row.productPrice || '0.00' }}</template>
          </el-table-column>
          <el-table-column prop="couponPrice" label="优惠金额" width="150">
            <template #default="scope">￥{{ scope.row.couponPrice || '0.00' }}</template>
          </el-table-column>
          <el-table-column prop="totalPayPrice" label="优惠后总金额" width="150">
            <template #default="scope">￥{{ scope.row.totalPayPrice || '0.00' }}</template>
          </el-table-column>
          <el-table-column prop="depositRatio" label="定金比例" v-auth="'/order/order/xgsl'" width="150">
          </el-table-column>
          <el-table-column prop="depositPrice" label="定金价格" v-auth="'/order/order/xgsl'" width="150">
          </el-table-column>
          <el-table-column prop="finalPrice" label="尾款" width="150">
            <template #default="scope">￥{{ scope.row.finalPrice || '0.00' }}</template>
          </el-table-column>
          <el-table-column prop="packagePrice" label="包装费" width="150">
            <template #default="scope">￥{{ scope.row.packagePrice || '0.00' }}</template>
          </el-table-column>
          <el-table-column prop="productAddress" label="生产基地" width="150"></el-table-column>
        </el-table>
        <!-- 赠品 -->
        <div class="common-form mt16">赠品信息</div>
        <el-table size="small" :data="giftProduct" border style="width: 100%" stripe>
          <el-table-column prop="imagePath" label="商品图片">
            <template #default="scope">
              <img :src="scope.row.imagePath || scope.row.skuVo.imagePath" style="width: 60px ; height:60px" />
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="赠品名称"></el-table-column>
          <el-table-column label="规格">
            <template #default="scope">
              {{ scope.row.productAttr || scope.row.skuVo.productAttr }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="buyNum" label="数量">
          </el-table-column> -->
          <el-table-column prop="produceAddress" label="生产基地">
            <template #default="scope">
              {{ scope.row.produceAddress }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import OrderApi from "@/api/order.js";
import changeAddress from "@/components/order/changeAddress.vue";
import Add from "./dialog/Add.vue";
import { deepClone } from "@/utils/base.js";
import Logistics from "@/components/logistics/viewLogistics.vue";
import ProductSelect from "@/components/product/deliveryProduct.vue";
import { ElMessage } from "element-plus";
export default {
  components: {
    ProductSelect,
    Add,
    changeAddress,
    Logistics,
  },
  props: {
    rowData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      giftProduct: [],
      OrderAuditForm: {
        auditType: '',
        auditDesc: ''
      },
      productList: [],
      remark: '',
      OrderAuditLoading: false,
      activeName: 'sp',
      giftListShow: false,
      dialogVisibleImg: false,
      dialogVisibleImgUrl: '',
      tabLoading: false,
      auditBtnDetailsShow: false,

      detail: {},
      loading: false,
      statusArry: [10, 20, 30], // 10待支付  20 待确认 30 待付尾款 
      btnLoading: false,

      pageType: '',
      slEdit: false,
      djblEdit: false,
      ywyxgShow: false,
      cwshShow: false,
      cwtkShow: false,
      cwddshShow: false,
      cwwkshShow: false,

      orderProductLoading: false,
      spTotal: 0,
      orderSelctProduct: [],
      orderCreate: false
    };
  },
  created() {
    this.detail = this.rowData;
    if (this.detail.productList) {
      this.detail.productList.map(item => {
        if (item.isGift == 0) {
          let obj = {
            ...item,
            gmsl: item.totalNum,
            buyNum: item.totalNum,
            sysl: (item.totalNum) - (item.deliveryCount || 0),
            yfhsl: item.deliveryCount || 0,
            depositPrice: item.depositRatio

          }
          this.productList.push(obj)
        } else if (item.isGift == 1) {
          // 拆分商品和赠品 0-非赠品 1-赠品
          this.giftProduct.push(item)
        }
      })
    }

  },
  methods: {


    // 订单审核
    OrderAudit() {
      let Obj = {
        orderId: this.detail.orderId,
        orderFlowId: this.detail.orderFlowId,
        auditType: this.OrderAuditForm.auditType,
        auditDesc: this.OrderAuditForm.auditDesc,
      }
      this.OrderAuditLoading = true
      OrderApi.orderAuditV2(Obj).then(result => {
        this.OrderAuditLoading = false
        const { code, msg } = result
        if (code === 1) {
          ElMessage.success(msg)
          this.$emit('OrderAudit')
        } else {
          ElMessage.error(msg)
        }
      }).catch(error => {
        this.OrderAuditLoading = false
      })
    },

  },

};
</script>
<style lang="scss" scoped>
.package-pre {
  height: var(--el-component-size-small);
  line-height: var(--el-component-size-small);
  font-weight: bold;
}

.delete-icon {
  font-size: 20px;
}

.list {
  display: flex;
  margin-top: 20px;
  overflow: hidden;
  list-style: none;
  padding: 0;

  .item {
    flex: none;
    width: 200px;
    font-size: 14px;
    line-height: 14px;
    color: rgba(0, 0, 0, 0.85);

    .title {
      margin-bottom: 12px;
      font-size: 13px;
      line-height: 13px;
      color: #666666;
    }

    .value1 {
      color: #f56022;
    }

    .value2 {
      color: #1bbe6b;
    }

    .value3 {
      color: var(--prev-color-primary);
    }

    .value4 {
      color: #6a7b9d;
    }

    .value5 {
      color: #f5222d;
    }
  }
}

.img {
  width: 100%;
  height: 100%;
}

.com-image {
  width: 60%;
  height: 300px;
  border: 1px solid #f0f0f0;
  margin-bottom: 10px;
}
</style>
